<template>
<div class="container--betterScroll">
  <div class="container--item">
    <img src="../assets/mall/CriticalSection.png" class="container--img__CriticalSection" alt="#">
    <div class="container--item__option">
      <span :style="{'color': index === 0? '#1f8ffd': '#000'}" @click="Snap">抢购中</span>
      <span :style="{'color': index === 1? '#1f8ffd': '#000'}" @click="aboutSnap">即将开始</span>
      <i :style="{
      'left': index === 0? '2rem': '6.8rem',
      'width': index === 0? '1rem': '1.4rem',
       }"></i>
    </div>
    <div class="container--item__time">
      <div class="container--item__box">
        <span class="container--limit__text" ref="limitText">{{limitText}}&nbsp;&nbsp;</span>
        <span class="container--num__hour">
          {{hour.toString().split('').length === 1? '0' + hour: hour}}
        </span>：
        <span class="container--num__hour">
          {{minute.toString().split('').length === 1? '0' + minute: minute}}
        </span>：
        <span class="container--num__hour">
          {{time.toString().split('').length === 1? '0' + time: time}}
        </span>
      </div>
    </div>
    <router-view></router-view>
  </div>
</div>
</template>
<script>
/* eslint-disable*/
  export default {
  name: 'ExplodingSpike',
  data() {
    return {
      index: 0,
      hour: 9,
      minute: 35,
      time: 59,
      intervalTime: null,
      limitText: '本场还剩',
      betterScroll: null,
    };
  },
  methods: {
    Snap() {
      this.index = 0;
      this.limitText = '本场还剩';
      this.$router.push({ name: 'Snap' });
    },
    aboutSnap() {
      this.index = 1;
      this.limitText = '即将开始';
      this.$router.push({ name: 'aboutSnap' });
    },
    Scroll() {
      this.betterScroll = new this.$Bs('.container--betterScroll', {
        scrollX: false,
        scrollY: true,
        click: true,
        probeType: 3, // 分发事件的情况
      });
    },
  },
  mounted() {
    this.intervalTime = setInterval(() => {
      this.time -= 1;
      if (this.time <= 0) {
        this.minute -= 1;
        this.hour === 0 && this.minute === 0 ? clearInterval(this.intervalTime) : this.time = 59;
      }
      if (this.minute <= 0) {
        if (this.hour <= 0) {
          this.num += 1;
        } else {
          if (this.num === 1) {
            this.minute = 0;
          } else {
            this.minute = 59;
            this.hour -= 1;
          }
        }
      }
    }, 1000);
    this.$nextTick(() => {
      this.Scroll();
      this.betterScroll.on('scroll', (e) => { if (e.y > 0) this.betterScroll.scrollTo(0, 0, 0); });
    });
  },
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.container--betterScroll{
  width: 100vw;
  height: 16.5rem;
  overflow: hidden;
  .container--item{
    width: 100vw;
    background-color: #eee;
    .container--img__CriticalSection{
      width: 100vw;
      height: (300/75) + rem;
    }
    .container--item__option{
      background-color: #fff;
      position: relative;
      width: 100vw;
      height: (90/75) + rem;
      margin-bottom: (10/75) + rem;
      span{
        font-size: .35rem;
        display: inline-block;
        width: 50%;
        height: 100%;
        line-height: (90/75) + rem;
        text-align: center;
      }
      i{
        transition: left .3s ease-in-out;
        position: relative;
        top: -.3rem;
        display: inline-block;
        height: (2/75) + rem;
        background-color: #1f8ffd;
      }
    }
    .container--item__time{
      width: 100vw;
      height: (81/75) + rem;
      position: relative;
      background-color: #fff;
      border-bottom: 1px solid #ccc;
      .container--item__box{
        line-height: (81/75) + rem;
        text-align: center;
        font-size: .4rem;
        .container--limit__text{
          font-size: .35rem;
          color: #f49747;
        }
        .container--num__hour{
          display: inline-block;
          font-size: .3rem;
          background-color: #000;
          width: .5rem;
          line-height: .5rem;
          text-align: center;
          border-radius: 3px;
          color: #fff;
        }
      }

    }

  }
}
</style>
